<template>
  <div class="search-container">
    <van-search
      v-model="value"
      show-action
      :placeholder="hotword"
      @search="onSearch"
      @input="oninput"
      @cancel="$router.back()"
    />
    <div v-show="searchList1.length" class="searchList">
      <van-cell :title="v.title" v-for="v in searchList1" :key="v._id">
        <van-icon name="close" />
      </van-cell>
    </div>
    <!-- 历史记录 -->
    <div class="search-history">
      <van-cell title="搜索历史">
        <div>
          <span>全部删除</span>
        </div>
      </van-cell>
      <van-cell title="11">
        <van-icon name="close" />
      </van-cell>
    </div>
    <!-- /历史记录 -->
  </div>
</template>


<script>
function debounce(fn, t = 500) {
  let timer = null;
  return function (...arg) {
    clearTimeout(timer);
    timer = setTimeout((v) => {
      fn.apply(this, arg);
    }, t);
  };
}

export default {
  data() {
    return {
      hotword: "二舅",

      searchList1: [],
      value: "",
    };
  },
  watch: {
    value(n) {
      if (n.trim().length === 0) {
        this.searchList1 = [];
      }
    },
  },
  methods: {
    oninput: debounce(function (e) {
      console.log(e);
      if (e.length == 0) return;
      this.search();
    }),
    onSearch(e) {
      e = e.trim(); //去掉前后空格
      e = e || this.hotword;

      console.log(e);
    },
    async search() {
      const { data: res } = await this.axios({
        method: "GET",
        url: "/api/search",
        params: { key_word: this.value, skip: 0, limit: 10 },
      });
      console.log(res);
      this.searchList1 = res.data;
    },
  },
};
</script>

<style  lang="less">
.searchList {
  position: fixed;
  left: 0;
  right: 0;
  top: 54px;
  bottom: 0;
  overflow-y: auto;
  z-index: 999;
}
</style>
